<script setup>
import {ref, watchEffect} from 'vue';
import {sendBuildInfo} from "src/utils/GetBuildInfo.js";
import {ElMessage} from 'element-plus';
let longitude = ref(null); // 经度
let latitude = ref(null); // 纬度
let name = ref(null); // 名称
const showDialog = defineModel('showDialog')
const marker = defineModel('marker')
const onSubmit = async () => {
  let getLat = latitude.value;
  let getLng = longitude.value;
  let getName = name.value;
  if (getLat && getLng && getName) {
    let query = {
      name: getName,
      lng: getLng,
      lat: getLat
    }
    let result = await sendBuildInfo(query);
    if (result.status === 200) {
      latitude.value = null;
      longitude.value = null;
      name.value = null;
      marker.value = null;
      showDialog.value = false;
      ElMessage.success('添加成功');
    }else {
      // TODO: 对话框提示错误信息
      ElMessage.error('添加失败');
    }
  } else {
    showDialog.value = false;
  }

}
const onReset = () => {
  latitude.value = null;
  longitude.value = null;
  name.value = null;
  marker.value = null;
  showDialog.value = false;
}

watchEffect(() => {
  if(marker.value) {
    console.log('marker', marker.value);
    console.log('marker.getLatLng()', marker.value.getLatLng());
    longitude.value = marker.value.getLatLng().lng;
    latitude.value = marker.value.getLatLng().lat;
  }
});


</script>

<template>
  <q-dialog v-model="showDialog" :position="center" persistent>
    <div class="q-pa-md" style="max-width: 1000px">
      <q-form
        @submit="onSubmit"
        @reset="onReset"
        class="q-gutter-md"
        style="max-width: 1000px"
      >
        <q-input
          rounded
          outlined
          label="经度"
          bg-color="white"
          type="number"
          lazy-rules
          v-model="longitude"
          hint="经度"
        />
        <q-input
          rounded
          outlined
          label="纬度"
          bg-color="white"
          type="number"
          v-model="latitude"
          lazy-rules
          hint="纬度"

        />
        <q-input
          rounded
          outlined
          label="名称"
          bg-color="white"
          v-model="name"
          lazy-rules
          hint="名称"
          rules="required"
          error-message="名称不能为空"
        />

        <div>
          <q-btn label="提交" type="submit" color="primary"/>
          <!--            <q-space/>  用q-space代替-->
          <q-btn label="取消" type="reset" color="primary" class="q-ml-sm"/>
        </div>
      </q-form>

    </div>


  </q-dialog>
</template>

<style scoped>

</style>
